<template>
  <div>
    <router-view />
    <van-tabbar v-show="$store.state.tab_show" v-model="active" @change="onChange" active-color="#FFFFFF" inactive-color="#7F7F7F">
      <van-tabbar-item :class="{ blueBg:active == 0}" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item :class="{ blueBg:active == 1}" icon="search">我的工作</van-tabbar-item>
      <van-tabbar-item :class="{ blueBg:active == 2}" icon="friends-o">企业用车</van-tabbar-item>
      <van-tabbar-item :class="{ blueBg:active == 3}" icon="setting-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {},
    onChange(index) {
      switch (index) {
        case 0:
          this.$router.push("/home");
          break;
        case 1:
          this.$router.push("/approve");
          break;
        case 2:
          this.$router.push("/carUsage");
          break;
        case 3:
          this.$router.push("/personalInfo");
          break;
        default:
          break;
      }
    },
    clearBgColor() {},
  },
};
</script>

<style scoped>
.blueBg {
  background-color: rgba(36, 56, 129, 1);
}

.whiteBg {
  background-color: white;
}
</style>